import React, { useState, useEffect } from 'react'
import { Layout, Row, Col, Typography, Alert, Spin } from 'antd'
import { DollarOutlined, GlobalOutlined } from '@ant-design/icons'
import LatestCards from './components/LatestCards'
import RatesChart from './components/RatesChart'
import PolicySummary from './components/PolicySummary'
import { apiService, HealthResponse } from './services/api'

const { Header, Content } = Layout
const { Title } = Typography

const App: React.FC = () => {
  const [health, setHealth] = useState<HealthResponse | null>(null)
  const [healthLoading, setHealthLoading] = useState(true)

  useEffect(() => {
    const checkHealth = async () => {
      try {
        const result = await apiService.getHealth()
        setHealth(result)
      } catch (error) {
        console.error('健康检查失败:', error)
      } finally {
        setHealthLoading(false)
      }
    }

    checkHealth()
    
    // 每30秒检查一次健康状态
    const interval = setInterval(checkHealth, 30000)
    return () => clearInterval(interval)
  }, [])

  return (
    <Layout style={{ minHeight: '100vh' }}>
      <Header style={{ 
        background: '#fff', 
        padding: '0 24px', 
        boxShadow: '0 2px 8px rgba(0,0,0,0.1)',
        display: 'flex',
        alignItems: 'center'
      }}>
        <div style={{ display: 'flex', alignItems: 'center' }}>
          <GlobalOutlined style={{ fontSize: 24, color: '#1890ff', marginRight: 12 }} />
          <Title level={3} style={{ margin: 0, color: '#1890ff' }}>
            JPY汇率检测系统
          </Title>
        </div>
        
        <div style={{ marginLeft: 'auto', display: 'flex', alignItems: 'center' }}>
          {healthLoading ? (
            <Spin size="small" />
          ) : health ? (
            <div style={{ display: 'flex', alignItems: 'center' }}>
              <div 
                style={{ 
                  width: 8, 
                  height: 8, 
                  borderRadius: '50%', 
                  backgroundColor: health.database_connected ? '#52c41a' : '#ff4d4f',
                  marginRight: 8
                }} 
              />
              <span style={{ fontSize: 12, color: '#666' }}>
                {health.database_connected ? '数据库正常' : '数据库异常'}
              </span>
            </div>
          ) : (
            <div style={{ display: 'flex', alignItems: 'center' }}>
              <div 
                style={{ 
                  width: 8, 
                  height: 8, 
                  borderRadius: '50%', 
                  backgroundColor: '#ff4d4f',
                  marginRight: 8
                }} 
              />
              <span style={{ fontSize: 12, color: '#666' }}>
                服务异常
              </span>
            </div>
          )}
        </div>
      </Header>

      <Content style={{ padding: '24px', background: '#f5f5f5' }}>
        {health && !health.database_connected && (
          <Alert
            message="数据库连接异常"
            description="请检查数据库连接状态，部分功能可能无法正常使用"
            type="warning"
            showIcon
            style={{ marginBottom: 24 }}
          />
        )}

        <Row gutter={[24, 24]}>
          {/* 最新汇率卡片 */}
          <Col span={24}>
            <LatestCards />
          </Col>

          {/* 汇率趋势图 */}
          <Col xs={24} lg={16}>
            <RatesChart />
          </Col>

          {/* 策略配置 */}
          <Col xs={24} lg={8}>
            <PolicySummary />
          </Col>
        </Row>

        <div style={{ 
          marginTop: 24, 
          textAlign: 'center', 
          color: '#999', 
          fontSize: 12 
        }}>
          <DollarOutlined style={{ marginRight: 4 }} />
          日元汇率监控系统 - 实时监控 JPY→CNY/USD 汇率变化
        </div>
      </Content>
    </Layout>
  )
}

export default App
